<template>
    <input
    :value="text"
    @input="event => text = event.target.value">

    <!-- <input
    v-bind:value="text"
    @input="event => text = event.target.value"> -->
    <!-- @input 一般用于监听事件,只要输入的值变化了就会触发input -->

    <!-- 下面这种也可以，因为""里面就是放js代码 -->
    <!-- <input
    :value="text"
    @input="function testFun (event){
    text = event.target.value}"> -->

    <!-- <input
    :value="text"
    @input="testFun"> -->

    <!-- 
        将input框的value属性和text动态绑定 
        @input是监听事件，只要输入的值变化了就会触发input，通过event.target.value赋值给变了text
    -->

    <p>{{text}}</p> 
    <p>-----------</p>
    
    <!-- 前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦：
    v-model 指令帮我们简化了这一步骤： -->
    <!-- 
    文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；
    <input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件；
    <select> 会绑定 value property 并侦听 change 事件：
    -->
    <input v-model="text">
</template>

<script setup>
import {ref} from 'vue'
const text = ref('')

function testFun (event){
    text.value = event.target.value
}

</script>